<html>
<head profile="http://www.w3.org/2002/12/namespace">
<link rel="stylesheet" type="text/css" href="../../../../dijit/themes/dijit.css">
<link rel="stylesheet" type="text/css" href="../../../../dijit/themes/tundra/tundra.css">
<title>GFX Layer</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<!-- hosted version -->
<script type="text/javascript" src="http://openlayers.org/api/2/OpenLayers.js"></script>

<script type="text/javascript">
	var djConfig = {
		isDebug : true,
		parseOnLoad : true
	};
</script>

<script type="text/javascript" src="../../../../dojo/dojo.js"></script>

<script type="text/javascript">
	require([	"dojo/ready",
						"dojo/_base/array",
						"dojo/_base/lang",
						"dojox/geo/openlayers/widget/Map",
						"dojox/geo/openlayers/GfxLayer",
						"dojox/geo/openlayers/Point",
						"dojox/geo/openlayers/LineString",
						"dojox/geo/openlayers/Collection",
						"dojox/geo/openlayers/GeometryFeature",
						"dojo/parser"], function(ready, arr, lang, Map, GfxLayer, Point, LineString, Collection, GeometryFeature){

		ready(function(){
			var map = dijit.byId("map");
			var layer = new GfxLayer("GfxLayer");
			map.map.addLayer(layer);
			var p1 = {
				x : 7.154126,
				y : 43.651748
			};
			var pg1 = new Point(p1);

			var p2 = {
				x : 7.1541,
				y : 43.6517
			};
			var pg2 = new Point(p2);

			var grp = new Collection([pg1, pg2]);

			var gf = new GeometryFeature(grp);
			gf.setStroke("red");
			gf.setShapeProperties({
				r : 10
			});
			layer.addFeature(gf);

			var cx = 7.154;
			var cy = 43.651;
			var ex = 0.001;

			var a1 = [{
				x : cx - ex,
				y : cy + ex
			}, {
				x : cx + ex,
				y : cy + ex
			}, {
				x : cx + ex,
				y : cy - ex
			}, {
				x : cx - ex,
				y : cy - ex
			}, {
				x : cx - ex,
				y : cy + ex
			}];

			ex = 0.00018;
			var a2 = [{
				x : cx - ex,
				y : cy + ex
			}, {
				x : cx + ex,
				y : cy + ex
			}, {
				x : cx + ex,
				y : cy - ex
			}, {
				x : cx - ex,
				y : cy - ex
			}, {
				x : cx - ex,
				y : cy + ex
			}];

			var f1 = new LineString(a1);
			var f2 = new LineString(a2);

			grp = new Collection([f1, f2]);
			gf = new GeometryFeature(grp);
			gf.setStroke("blue");
			gf.setFill([0, 0, 0, 0.2]);
			layer.addFeature(gf);
			arr.forEach(a2, function(p){
				var pg = new Point(p);
				gf = new GeometryFeature(pg);
				gf.createShape = lang.hitch(this, function(/* Surface */s){
					var r1 = 30;
					var r2 = 10;
					var branches = 9;
					var star = makeStarShape(r1, r2, branches);
					var path = s.createPath();
					path.setShape({
						path : star
					});
					return path;
				});
				gf.setStroke("aqua");
				//      gf.setFill({
				//        color : [ 255, 100, 0 ]
				//      });
				gf.setFill([255, 100, 0]);
				layer.addFeature(gf);
			});
			layer.redraw();
		});

		function makeStarShape(r1, r2, b){
			var TPI = Math.PI * 2;
			var di = TPI / b;
			var s = null;
			var start = Math.PI;
			var end = start + TPI;
			for ( var i = start; i < end; i += di) {
				var c1 = Math.cos(i);
				var s1 = Math.sin(i);
				var i2 = i + di / 2;
				var c2 = Math.cos(i2);
				var s2 = Math.sin(i2);
				if (s == null) {
					s = "M" + (s1 * r1).toFixed(2) + "," + (c1 * r1).toFixed(2) + " ";
				} else {
					s += "L" + (s1 * r1).toFixed(2) + "," + (c1 * r1).toFixed(2) + " ";
				}
				s += "L" + (s2 * r2).toFixed(2) + "," + (c2 * r2).toFixed(2) + " ";
			}
			s += "z";
			return s;
		}

	});
</script>

</head>
<body class="tundra">
</head>

<div id="map" dojoType="dojox.geo.openlayers.widget.Map" baseLayerType="'OSM'"
	initialLocation="{
    position : [7.154126, 43.651748],
    extent : 0.002 }"
	style="background-color: #b5d0d0; width: 100%; height: 100%;"></div>

</body>
</html>
